<template>
    <div>
        <div class="container">
            <Charts @getList="getList"></Charts>
            <div class="videoListContainer">
                <DanceMain :videoList="videoList"  @getList="getList" ></DanceMain>
            </div>
            
        </div>
    </div>
</template>

<script setup lang="ts">
    import Charts from "../../../components/charts/index.vue";
    import DanceMain from "@/components/DanceMain/index.vue";
    import { useRouter,useRoute } from "vue-router"

import { reactive, ref, onMounted ,watch} from 'vue'
import useRecommendStore from "@/stores/recommend";
const recommendStore = useRecommendStore();
const router = useRouter();
const route = useRoute();

const videoList = ref([]);
const nowPath = ref("");
const loading = ref(false);



// 发请求拿数据
const getList = async()=>{

    if(route.path=="/index/original"){
       try {
        await  recommendStore.getOriginalVideoList();
        videoList.value =  recommendStore.original.videoList;
        nowPath.value = "original";
        // console.log("视频列表内容",videoList.value,recommendStore.original.column);
        
       } catch (error) {
        
       }
    }else if(route.path=="/index/course"){
        try {
        await  recommendStore.getCourseVideoList();
        videoList.value =  recommendStore.course.videoList;
        nowPath.value = "course";
        // console.log("视频列表内容",videoList.value,recommendStore.course.column);
        
       } catch (error) {       
       }
    }else if(route.path=="/index/specialTopic"){
        try {
        await  recommendStore.getSpecialTopicVideoList();
        videoList.value =  recommendStore.specialTopic.videoList;
        nowPath.value = "specialTopic";
        // console.log("视频列表内容",videoList.value,recommendStore.specialTopic.column);
        
       } catch (error) {       
       }
    }


    
}

// 监听路径变化，只要路径发生变化，仓库中所有视频数据都要清空,重新获取新数据
watch(()=>route.path,()=>{
    console.log(route.path);
    
    recommendStore.clearData();

    getList();
})




onMounted(()=>{
    recommendStore.hotId="1"
    getList();
})

</script>

<style scoped>
.videoListContainer{
    margin-top:-20px ;
}

</style>